<template>
    <div class="login-container">
      <div class="login-card">
        <h2>欢迎登录</h2>
        <form @submit.prevent="handleLogin">
          <div class="form-group">
            <label for="username">用户名</label>
            <input 
              type="text" 
              id="username" 
              v-model="credentials.username" 
              placeholder="请输入用户名" 
              required
            >
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input 
              type="password" 
              id="password" 
              v-model="credentials.pwd" 
              placeholder="请输入密码" 
              required
            >
          </div>
          <button type="submit" class="btn-login" :disabled="loading">
            <Spinner v-if="loading" />
            <span v-else>登录</span>
          </button>
          <p class="register-link">
            还没有账号？<router-link to="/register">立即注册</router-link>
          </p>
        </form>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { loginUser, getAllUsers } from '../api/index.ts' // 恢复为不带扩展名的标准导入方式
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'

  const router = useRouter()
  const loading = ref(false)
  const errorMessage = ref('')
  
  // 使用credentials替代form
  const credentials = ref({
    username: '',
    pwd: ''
  })
  
  const handleLogin = async () => {
    try {
        const response = await loginUser({
            username: credentials.value.username,
            pwd: credentials.value.pwd
        })
        console.log('登录成功:', response.data)

        // 获取所有用户信息
        const usersResponse = await getAllUsers()
        console.log('所有用户信息:', usersResponse.data)

        // 跳转到首页或其他页面
        router.push('/')
    } catch (error) {
        console.error('登录失败:', error)
        ElMessage.error('登录失败，请检查用户名和密码')
    }
  }
  </script>
  
  <style scoped lang="scss">
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    padding: 20px;
  }
  
  .login-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 40px;
    width: 100%;
    max-width: 450px;
    backdrop-filter: blur(10px);
    animation: fadeIn 0.5s ease-in-out;
  }
  
  h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 28px;
  }
  
  .form-group {
    margin-bottom: 25px;
  }
  
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
  }
  
  input {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
    
    &:focus {
      border-color: #3498db;
      outline: none;
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }
  }
  
  .btn-login {
    width: 100%;
    padding: 14px;
    background: linear-gradient(to right, #3498db, #2c3e50);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    
    &:disabled {
      background: #bdc3c7;
      cursor: not-allowed;
    }
  }
  
  .register-link {
    text-align: center;
    margin-top: 20px;
    color: #555;
    
    a {
      color: #3498db;
      text-decoration: none;
      font-weight: 500;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
  
  .error-message {
    color: #e74c3c;
    text-align: center;
    margin-top: 15px;
    font-weight: 500;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @media (max-width: 576px) {
    .login-card {
      padding: 25px;
    }
  }
  </style>